<template>
  <div class="user-container">

    <div class="button-container">
      <el-button type="danger" size="small" @click="DeleteArticle">批量删除</el-button>
      <el-input style="width: 250px;margin-left: 50px;" size="small" placeholder="请输入搜索内容" prefix-icon="el-icon-search"
        v-model="article.searchContent" clearable @clear="getArticleList">
        <el-button size="small" slot="append" icon="el-icon-search" @click="getArticleList"></el-button>
      </el-input>
    </div>

    <div class="table-container">
      <el-table row-height=20 :data="articleList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" show-overflow-tooltip width="120">
        </el-table-column>
        <el-table-column prop="content" label="文章内容" show-overflow-tooltip width="180">
        </el-table-column>
        <el-table-column prop="publish_date" label="发布时间" show-overflow-tooltip width="180">
        </el-table-column>
        <el-table-column prop="nickname" label="作者昵称" show-overflow-tooltip width="120">
        </el-table-column>
        <el-table-column prop="category_name" label="文章类别" show-overflow-tooltip width="80">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="text" size="large">查看</el-button>
            <el-button @click="handleDelete(scope.row)" type="text" size="large">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="article.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="article.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getListAPI,deleteArticleAPI } from '@/api/article'
export default {
  data() {
    return {
      dialogTableVisible: true,
      articleList: [],
      total: 0,
      ids: '',
      article: {
        pageNum: 1,
        pageSize: 5,
        searchContent: ''
      },
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    // 删除用户
    handleDelete(row) {
      this.ids = row.id
      this.DeleteArticle()
    },
    DeleteArticle() {
      this.$confirm("你确定要删除吗？").then(async () => {
        const res = await deleteArticleAPI(this.ids)
        this.getArticleList()
        if (res.code == 200) {
          this.$message.success("删除成功")
          this.article.pageNum = 1
        } else {
          this.$message.error("删除失败")
        }
      }).catch(() => {
        this.$message.info("已取消")
      })
    },
    async handleDetail(row) {
      this.$router.push('/articleDetail?articleID='+row.id)
    },
    async getArticleList() {
      const res = await getListAPI(this.article)
      this.total = res.data.total
      this.articleList = res.data.rows
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    // 处理分页
    handleSizeChange(val) {
      this.user.pageSize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.user.pageNum = val
      this.getUserList()
    },
  }
}
</script>

<style>
.button-container {
  margin: 10px;
}

.block {
  text-align: right;
  padding: 10px;
}

.picture-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
</style>
